原型链

一、内容提要

​ 原型链可以说是js面向对象概念中最顶端的存在，弄清原型链，整个面向对象脉络就会变得清晰连贯。进而对于对象私有属性，公有属性底层是如何查找使用，遵守何种优先级都会有所了解。

本节知识点：

  1. 原型继承底层原理

  2. 原型链结构

  3. 对象属性查找原则

二、前提技术

熟悉实例与构造函数关系 熟悉原型继承实现

三、内容详解

1.原型继承底层原理

​ 之前我们已经学习了如何实现原型方式继承，概括来说原型继承就是将上层函数实例赋值给下级函数原型。而继承后下级函数再创建的实例就可以使用上级函数原型中的属性。记过显而易见，而继承在底层到底构建了一种什么样的结构呢？我们从图形结构上来看看。

​ 首先，继承之前函数、原型、实例之间是什么的结构呢？我们通过图形来梳理一下。

​ 而当我们继承后我们做了什么，我们将下级函数也就是Student函数的原型替换成了上级函数也就是Person的实例，之后我们在创建Student的实例就可以使用Person原型中的属性了。

//人构造函数
function Person(name, age){
      this.name = name;
      this.age = age;
}
//每个人都有自我介绍行为，将say函数扩展到原型
Person.prototype.say = function(){
      console.log("我叫"+this.name);
};

//学生构造函数
function Student(name, age, stuNum){
      this.name = name;
      this.age = age;
      this.stuNum = stuNum; //学生在人的基础上还具备学生特有的学号属性
}

//基于以上两个构造函数，让学生继承人构造函数
Student.prototype = new Person();

//同时学生还有学习行为
Student.prototype.study = function(){
      console.log("好好学习，天天向上！");
};

//虽然我们在以上案例中Student原型中没有扩展say函数
var stu = new Student("tom", 18, "n19890101");

​ 继承后，我们到底得到了哪些结果呢？

//实例的__proto__ 指向构造函数的原型  这是js原有特性
console.log(stu.__proto__ === Student.prototype);
console.log((new Person()).__proto__ === Person.prototype);

//基于以上特性 我们将上级函数实例new Person()赋值给了下级函数的原型Student.prototype
Student.prototype = new Person();

//单纯从以上赋值推倒可以得出学生实例通过__proto__属性找到Student的原型，而原型中又有一个__proto__属性可以找到Person的原型。
console.log(stu.__proto__.__proto__ === Person.prototype);

//原型继承本质是使用将上级函数实例赋值给下级函数原型，构建了两级函数原型之间的关系。
stu.say();

到底是什么构建起了下级函数实例和上级函数原型中间的通道呢？我们看下继承中我们做了什么？

​ 原型继承中我们使用Person的实例替换掉了Student函数的原型。此时当初上级函数的实例有了另一个身份，那就是Student的原型，之后再创建的Student实例都可以使用其中的属性了了。注意观察图形中那条红色的线。当学生实例在Student原型中找不到要访问属性时，底层会继续沿着__proto__属性向上查找。找到了Person的原型。

​原型继承本质正是在两级函数的原型之间，搭建了一个桥梁。

2.原型链结构

​ 理解了什么是原型，又学习了原型继承，到此原型链已经不再是什么神秘的机构了。一句话解释原型链是什么。原型链是构造函数之间通过原型继承，将彼此原型相互链接组成的链型结构。

​ 我们看一下Student和Person两个函数。原本他们的原型是独立毫无关系的，而原型方式继承后，由于下级函数原型被替换为上级函数的实例，上级函数实例由自带一个__proto属性连着Person的原型。从何两个函数的原型被这个__proto__属性连载了一起。而函数和函数逐级继承。原型链长度也可以越来越长。

​ 原型链从最底层实例的__proto__属性开始，逐级向上连接构造函数的原型，而所有构造函数，原型都是Object实例，也就是说在底层都继承自Object函数，也就是说原型链最顶层的原型是Object.prototype。

3.对象属性查找原则

​ 通过以上一系列的讲解，我们抛开程序从宏观结构上看一下原型，实例，原型链的结构。

四、总结

五、开发环境

chrome 浏览器version：52+、sublime3

results matching ""

    No results matching ""